<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map demo</title>
    <link rel="stylesheet" href="../js/lib/ol4.6.4/ol.css" type="text/css">
    <link rel="stylesheet" href="../css/demo.css" type="text/css">
</head>
<body>
<div id="map">
</div>
<script src="../js/lib/ol4.6.4/ol.js"></script>
<script src="../js/lib/jquery/jquery-3.3.1.min.js"></script>
<script>
    var view = new ol.View({
        zoom: 4,
        center:ol.proj.transform([267, 38],"EPSG:4326", "EPSG:3857")
    });

    var osm = new ol.layer.Tile({
        source: new ol.source.XYZ({
                    url: "https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png"
                })
    });

    var wms = new ol.layer.Image({
        source: new ol.source.ImageWMS({
            ratio: 1,
            url: 'http://localhost:8080/geoserver/wms',
            params: {
                'FORMAT': 'image/png',
                'VERSION': '1.1.1',
                "LAYERS": 'topp:states',
            }
        })
    });
    var tileWms = new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: 'http://localhost:8080/geoserver/wms',
            params: {
                'FORMAT': 'image/png',
                tiled: true,
                LAYERS: 'topp:states',
                tilesOrigin: -124.73142200000001 + "," + 24.955967
            }
        })
    });

    var map = new ol.Map({
        target: "map",
        layers: [
            osm,
            getTdtLayer("cva_w"),
            tileWms
        ],
        view: view
    });

    function getTdtLayer(lyr){
        // var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";
        var urls = [];
        for(var i=0;i<8;i++){
            urls.push("http://t"+i+".tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}&tk=16c5722fed64bcdbb390cc21a5548cf9");
        }
        var layer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                urls:urls
            })
        });
        return layer;
    }
</script>
</body>
</html>
